<template>
  <div>
   <el-card>
        <el-alert
      v-if="isReport"
      style="margin: 0 0 30px 0"
      :title="
        '今日已成功打卡,勤洗手,戴口罩,不群聚,打卡时间:[' +
        healthForm.createTime +
        ']'
      "
      type="success"
      show-icon
      :closable="false"
    >
    </el-alert>
    <div class="info">
      <el-row>
        <el-col :span="19"> <h3>基本信息</h3></el-col>
        <el-col :span="5">
          <el-button style="float: right" type="warning" @click="showdrawer"
            >签到记录</el-button
          >
          <el-button
            style="float: right"
            type="primary"
            v-if="!isReport"
            @click="onSubmit"
            v-permission="'health:report'"
            >立即打卡</el-button
          >
          <el-button style="float: right" @click="handleReset" v-if="!isReport"
            >重置</el-button
          >
        </el-col>
      </el-row>
    </div>
    <el-row style="margin: 30px 0" :gutter="20">
      <el-form :model="form" label-width="80px">
        <el-col :span="8">
          <el-form-item label="打卡人">
            <el-input v-model="form.username" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="打卡时间">
            <el-date-picker
              v-model="form.nowTime"
              disabled
              type="datetime"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属部门">
            <el-input v-model="form.department" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="health">
      <h3>健康打卡</h3>
    </div>
    <div class="health_box" style="margin: 30px 0">
      <el-form
        :rules="rules"
        ref="healthRef"
        :model="healthForm"
        label-position="top"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="省份" prop="valueProvince">
              <el-select
                :disabled="isReport"
                @change="changeProvince"
                v-model="healthForm.valueProvince"
                placeholder="请选择省"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.name"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" prop="valueCity">
              <el-select
                :disabled="isReport"
                @change="changeCity"
                v-model="healthForm.valueCity"
                placeholder="请选择市"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.name"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="区县" prop="valueOrigin">
              <el-select
                :disabled="isReport"
                @change="changeOrigin"
                v-model="healthForm.valueOrigin"
                placeholder="请选择区"
              >
                <el-option
                  v-for="item in originList"
                  :key="item.name"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="isReport">
            <el-form-item label="打卡地点">
              <el-tag>{{ healthForm.address }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="目前健康状况" prop="situation">
              <el-radio-group
                :disabled="isReport"
                v-model="healthForm.situation"
              >
                <el-radio :label="0">健康</el-radio>
                <el-radio :label="1">有咳嗽发热症状</el-radio>
                <el-radio :label="2">其他情况</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="接触的人是否有疑似症状? (冠状病毒检测结果为阳性或尚在等待检测结构)"
              prop="touch"
            >
              <el-radio-group :disabled="isReport" v-model="healthForm.touch">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              prop="passby"
              label="自2020年1月1日起,是否在湖北省停留过 (包括转车路过)"
            >
              <el-radio-group :disabled="isReport" v-model="healthForm.passby">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="reception"
              label="自2020年1月1日起,是否有接待过来自湖北的客户,亲戚或朋友)"
            >
              <el-radio-group
                :disabled="isReport"
                v-model="healthForm.reception"
              >
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-drawer
      title="我是标题"
      :visible.sync="infoShow"
      :with-header="false"
      show-close
    >
      <el-card
        class="box-card"
        v-for="item in this.infoData"
        :key="item.id"
        style="margin-bottom: 10px; height: 21%"
      >
        <div class="text item">
          <ul>
            <!-- <li>打卡人:{{ userInfo.username }}</li> -->
            <li>打卡位置:{{ item.address }}</li>
            <li>打卡时间:{{ item.createTime }}</li>
            <li>
              健康状况:
              <div style="float: right">
                <el-tag
                  v-if="item.situation === 0"
                  size="small"
                  effect="dark"
                  type="success"
                  >健康</el-tag
                >
                <el-tag
                  v-else-if="item.situation === 1"
                  size="small"
                  effect="dark"
                  type="danger"
                  >发热</el-tag
                >
                <el-tag
                  v-else-if="item.situation === 2"
                  size="small"
                  effect="dark"
                  type="warning"
                  >其他情况</el-tag
                >
              </div>
            </li>
          </ul>
        </div>
        <!--                        分页-->
      </el-card>
      <!-- <page-tools
        :total="total"
        @pageChange=""
        @pageSizeChange=""
        :paginationPage=""
        :paginationPagesize="queryMap.pageSize"
      ></page-tools> -->
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="pageChange"
        :current-page="queryMap.pageNum"
        :page-size="queryMap.pageSize"
        background
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </el-drawer>
   </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getCityListApi, isReport, doReport, getInfo } from '../../api/hearch'
export default {
  data () {
    return {
      infoData: [],
      infoShow: false,
      form: {
        username: '',
        department: '',
        nowTime: ''
      },
      timerId: null,
      healthForm: {
        valueProvince: '',
        valueCity: '',
        valueOrigin: '',
        situation: '',
        touch: '',
        passby: '',
        reception: '',
        city: '',
        province: '',
        origin: ''
      },
      provinceList: [],
      cityList: [],
      isReport: false,
      originList: [],
      rules: {
        situation: [
          { required: true, message: '请选择当前情况', trigger: 'blur' }
        ],
        touch: [{ required: true, message: '请选择是否接触', trigger: 'blur' }],
        passby: [
          { required: true, message: '请选择是否路过', trigger: 'blur' }
        ],
        reception: [
          { required: true, message: '请选择是否招待', trigger: 'blur' }
        ],
        valueProvince: [
          { required: true, message: '请输入省份', trigger: 'blur' }
        ],
        valueCity: [{ required: true, message: '请输入城市', trigger: 'blur' }],
        valueOrigin: [
          { required: true, message: '请输入区县', trigger: 'blur' }
        ]
      },
      queryMap: { pageSize: 4, pageNum: 1 },
      total: 0
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    pageChange (val) {
      this.queryMap.pageNum = val
      this.getInfohistory()
    },
    pageSizeChange (val) {
      this.queryMap.pageSize = val
      this.getInfohistory()
    },
    showdrawer () {
      this.infoShow = true
      this.getInfohistory()
    },
    async getInfohistory () {
      const res = await getInfo(this.queryMap)
      if (!res.success) return this.$notify.success(res.data.errorMsg)
      this.infoData = res.data.rows
      this.total = res.data.total
    },
    // 提交打卡
    onSubmit () {
      this.$refs.healthRef.validate((valid) => {
        if (!valid) return false
        this.doSumbit()
      })
    },
    async doSumbit () {
      const data = {
        address:
          this.healthForm.province +
          '/' +
          this.healthForm.city +
          '/' +
          this.healthForm.origin,
        ...this.healthForm
      }
      const res = await doReport(data)
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.$notify.success('今日打卡成功')
      this.getisReport()
    },
    handleReset () {
      this.healthForm = {
        valueProvince: '',
        valueCity: '',
        valueOrigin: '',
        situation: '',
        touch: '',
        passby: '',
        reception: '',
        city: '',
        province: '',
        origin: ''
      }
      this.$refs.healthRef.resetFields()
    },
    // 获取当前时间
    getNowTime () {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var hour = date.getHours()
      var minute = date.getMinutes()
      var second = date.getSeconds()
      var currentTime =
        year +
        '-' +
        (month < 10 ? '0' + month : month) +
        '-' +
        (day < 10 ? '0' + day : day) +
        ' ' +
        (hour < 10 ? '0' + hour : hour) +
        ':' +
        (minute < 10 ? '0' + minute : minute) +
        ':' +
        (second < 10 ? '0' + second : second)
      return currentTime
    },
    // 获取城市city
    async getCityList () {
      const res = await getCityListApi()
      this.provinceList = []
      this.cityList = []
      this.originList = []
      res.forEach((item) => {
        if (item.value.match(/0000$/)) {
          this.provinceList.push({
            value: item.value,
            label: item.name,
            children: []
          })
        } else if (item.value.match(/00$/)) {
          this.cityList.push({
            value: item.value,
            label: item.name,
            children: []
          })
        } else {
          this.originList.push({
            value: item.value,
            label: item.name
          })
        }
      })
      for (const index in this.provinceList) {
        for (const index1 in this.cityList) {
          if (
            this.provinceList[index].value.slice(0, 2) ===
            this.cityList[index1].value.slice(0, 2)
          ) {
            this.provinceList[index].children.push(this.cityList[index1])
          }
        }
      }
      for (const item1 in this.cityList) {
        for (const item2 in this.originList) {
          if (
            this.originList[item2].value.slice(0, 4) ===
            this.cityList[item1].value.slice(0, 4)
          ) {
            this.cityList[item1].children.push(this.originList[item2])
          }
        }
      }
    },
    // 选择省
    changeProvince (val) {
      this.provinceList.forEach((province, index) => {
        if (val.toString() === this.provinceList[index].value) {
          this.cityOptions = this.provinceList[index].children
          this.healthForm.valueCity =
            this.provinceList[index].children[0].value // 设置市的值
          this.healthForm.city = this.provinceList[index].children[0].label

          this.healthForm.valueOrigin =
            this.provinceList[index].children[0].children[0].value // 设置县的值
          this.healthForm.origin =
            this.provinceList[index].children[0].children[0].label

          this.originOptions = this.provinceList[index].children[0].children
          // set value
          this.healthForm.province = this.provinceList[index].label
        }
      })
    },
    // 选择市
    changeCity (val) {
      this.cityList.forEach((city, index) => {
        if (val.toString() === this.cityList[index].value) {
          this.originOptions = this.cityList[index].children
          this.healthForm.valueOrigin = this.cityList[index].children[0].value // 设置县的值;
          // set value
          this.healthForm.city = this.cityList[index].label
        }
      })
    },
    // 选择区
    changeOrigin (val) {
      this.healthForm.valueOrigin = val

      this.originList.forEach((origin, index) => {
        if (val.toString() === this.originList[index].value) {
          // set value
          this.healthForm.origin = this.originList[index].label
        }
      })
      // 添加this.$forceUpdate();进行强制渲染，效果实现。搜索资料得出结果：因为数据层次太多，render函数没有自动更新，需手动强制刷新。
      this.$forceUpdate()
    },
    async getisReport () {
      const res = await isReport()
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      if (res.data) {
        this.isReport = true
        this.healthForm = res.data
      } else {
        this.isReport = false
        this.$notify.warning({
          title: '温馨提示',
          message: '您今日还未打卡,别忘记了哟~'
        })
      }
    }
  },
  created () {
    this.getCityList()
    const userInfo = JSON.parse(this.userInfo)
    this.form.username = userInfo.username
    this.form.department = userInfo.department
    this.timerId = setInterval(() => {
      this.form.nowTime = this.getNowTime()
    }, 1000)
    this.getisReport()
  },
  destroyed () {
    clearInterval(this.timerId)
  }
}
</script>

<style lang='less' scoped>
.info,
.health {
  border-bottom: 1px solid #dcdfe6;
  padding-bottom: 20px;
  h3 {
    font-size: 16px;
    font-weight: 700;
  }
}
.health {
  margin-top: 15px;
}
</style>
